<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>首页</title>
    <!-- 设置文档编码 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <!--  -->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="js/jquery-1.9.1.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <!-- CSS样式 -->
    <style type="text/css">
        .img-wrap {
            display: inline-block;
        }

        .img-wrap img {
            width: 100%;
            height: 10%;
            vertical-align: middle;
        }

        .class-item {
            display: flex;
            justify-content: space-between;
        }

        .class-item img {
            width: 14px;
            height: 14px;
        }

        .class-item ~ ul > li {
            text-indent: 1em;
        }

        .class-item ~ ul > li ~ ul > li {
            text-indent: 2em;
        }

        .selected {
            background-color: #f5f5f5;
        }

        .selected img {
            transform: rotate(-180deg);
            transition: all 0.3s;
        }

        .no-selected img {
            transform: rotate(0deg);
            transition: all 0.3s;
        }

        .list-group {
            margin: 0;
        }
    </style>
</head>
<body>
<div class="img-wrap">
    <img src="微信图片_20240512105416.jpg"/>
</div>
<div>
    <button class="btn btn-default" style="width: 16.5%;">小学</button>
    <button class="btn btn-default" style="width: 15%;">初中</button>
    <button class="btn btn-default" style="width: 15%;">高中</button>
    <button class="btn btn-default" style="width: 24.5%;">中考提分</button>
    <button class="btn btn-default" style="width: 24.5%;">高考提分</button>
</div>
<ul class="list-group">
    <li class="list-group-item class-item" onclick="showli('ids',1)"><span>一年级</span><img src="img/jiantou.png"
                                                                                             alt=""></li>
    <ul class="list-group" id="ids1" style="display: none">
        <li class="list-group-item class-item" onclick="showli('idd',1)"><span>上册</span><img src="img/jiantou.png"
                                                                                               alt=""></li>
        <ul class="list-group" id="idd1" style="display: none">
            <li class="list-group-item class-item" onclick="showli('ida',1)"><span>一单元</span><img
                    src="img/jiantou.png" alt=""></li>
            <ul class="list-group" id="ida1" style="display: none">
                <div style="text-align: center;padding: 8px 0;">一年级数学上册</div>
                <video controls src="video/30c81a6ae9d4bd2ac889dd8eba06edc4.mp4" style="width: 100%;height: 200px">
                    测试
                </video>
            </ul>
            <li class="list-group-item class-item"><span>二单元</span><img src="img/jiantou.png" alt=""></li>
            <li class="list-group-item class-item"><span>三单元</span><img src="img/jiantou.png" alt=""></li>
            <li class="list-group-item class-item"><span>四单元</span><img src="img/jiantou.png" alt=""></li>
            <li class="list-group-item class-item"><span>五单元</span><img src="img/jiantou.png" alt=""></li>
        </ul>
        <li class="list-group-item class-item" onclick="showli('idd',2)"><span>下册</span><img src="img/jiantou.png"
                                                                                               alt=""></li>
        <ul class="list-group" id="idd2" style="display: none">
            <li class="list-group-item class-item" onclick="showli('ida',2)"><span>一单元</span><img
                    src="img/jiantou.png" alt=""></li>
            <li class="list-group-item class-item"><span>二单元</span><img src="img/jiantou.png" alt=""></li>
            <li class="list-group-item class-item"><span>三单元</span><img src="img/jiantou.png" alt=""></li>
            <li class="list-group-item class-item"><span>四单元</span><img src="img/jiantou.png" alt=""></li>
            <li class="list-group-item class-item"><span>五单元</span><img src="img/jiantou.png" alt=""></li>
        </ul>
    </ul>
    <li class="list-group-item class-item" onclick="showli('ids',2)"><span>二年级</span><img src="img/jiantou.png"
                                                                                             alt=""></li>
    <ul class="list-group" id="ids2" style="display: none">
        <li class="list-group-item class-item"><span>上册</span><img src="img/jiantou.png" alt=""></li>
        <li class="list-group-item class-item"><span>下册</span><img src="img/jiantou.png" alt=""></li>
    </ul>
    <li class="list-group-item class-item" onclick="showli('ids',3)"><span>三年级</span><img src="img/jiantou.png"
                                                                                             alt=""></li>
    <ul class="list-group" id="ids3" style="display: none">
        <li class="list-group-item class-item"><span>上册</span><img src="img/jiantou.png" alt=""></li>
        <li class="list-group-item class-item"><span>下册</span><img src="img/jiantou.png" alt=""></li>
    </ul>
    <li class="list-group-item class-item" onclick="showli('ids',4)"><span>四年级</span><img src="img/jiantou.png"
                                                                                             alt=""></li>
    <ul class="list-group" id="ids4" style="display: none">
        <li class="list-group-item class-item"><span>上册</span><img src="img/jiantou.png" alt=""></li>
        <li class="list-group-item class-item"><span>下册</span><img src="img/jiantou.png" alt=""></li>
    </ul>
    <li class="list-group-item class-item" onclick="showli('ids',5)"><span>五年级</span><img src="img/jiantou.png"
                                                                                             alt=""></li>
    <ul class="list-group" id="ids5" style="display: none">
        <li class="list-group-item class-item"><span>上册</span><img src="img/jiantou.png" alt=""></li>
        <li class="list-group-item class-item"><span>下册</span><img src="img/jiantou.png" alt=""></li>
    </ul>
    <li class="list-group-item class-item" onclick="showli('ids',6)"><span>六年级</span><img src="img/jiantou.png"
                                                                                             alt=""></li>
    <ul class="list-group" id="ids6" style="display: none">
        <li class="list-group-item class-item"><span>上册</span><img src="img/jiantou.png" alt=""></li>
        <li class="list-group-item class-item"><span>下册</span><img src="img/jiantou.png" alt=""></li>
    </ul>
</ul>
<script>
    function showli(obj, val) {

        if ($("#" + obj + val).is(':hidden')) {
            if (obj === 'ids') {
                document.querySelectorAll('.class-item ~ ul').forEach((element) => {
                    element.style.display = 'none';
                    element.classList.remove('selected');
                    element.classList.add('no-selected');
                });
                document.querySelectorAll('.class-item').forEach((element) => {
                    element.classList.remove('selected');
                    element.classList.add('no-selected');
                });
            }
            $("#" + obj + val).show();
        } else {
            $("#" + obj + val).hide();
        }

    }

    document.querySelectorAll('.class-item').forEach((element) => {
        setSelected(element);
    })

    //设置选中样式
    function setSelected(element) {
        element.addEventListener('click', function () {
            // 检查元素是否已经具有'selected'类
            if (!this.classList.contains('selected')) {
                // 删除'no-selected'类
                this.classList.remove('no-selected');
                // 添加'selected'类
                this.classList.add('selected');
            } else {
                // 删除'selected'类
                this.classList.remove('selected');
                // 添加'no-selected'类
                this.classList.add('no-selected');
            }

        });
    }
</script>

</body>
</html>